<template>
  <div class="container">
    <div v-if="type !== 'look'" class="detail">
      <div class="header">
        <span>{{type === 'edit' ? '编辑' : '新增'}}</span>
        <div class="btn-group">
          <el-button class="query" @click="merchantAdd">确定</el-button>
          <el-button plain class="clear" @click="$router.back()">取消</el-button>
        </div>
      </div>
    </div>
    <div class="detail">
      <div class="title">
        <div class="icon"></div>
        <div class="desc">商品信息</div>
      </div>
      <el-form ref="form" :model="form" label-position="top">
        <el-row type="flex" justify="start" :gutter="20">
          <el-col :span="8">
            <el-form-item prop="name">
              <template #label>
                <div>商品名称<span style="color: red">*</span></div>
              </template>
              <el-input
                :disabled="readonly"
                v-model="form.name"
                placeholder="请输入"
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="price">
              <template #label>
                <div>商品价格<span style="color: red">*</span></div>
              </template>
              <el-input-number :controls="false" :disabled="readonly" v-model="form.price" style="width: 100%"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item prop="status">
              <template #label>
                <div>状态<span style="color: red">*</span></div>
              </template>
              <el-switch
                :disabled="readonly"
                v-model="form.status"
                active-value="1"
                inactive-value="0"
                active-text="有售">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item prop="price">
          <template #label>
            <div>商品首图<span style="color: red">*</span></div>
          </template>
          <el-upload
            :disabled="readonly"
            class="mer-uploader"
            :action="uploadFileUrl"
            :show-file-list="false"
            :headers="headers"
            :on-success="handleImgSuccess"
          >
            <img class="mer-img" v-if="form.imageUrl" :src="form.imageUrl">
            <i v-else class="el-icon-camera-solid" style="color: #D0D0D0; font-size: 20px"></i>
          </el-upload>
        </el-form-item>
      </el-form>

    </div>
    <div class="detail">
      <div class="title" style="margin: 0">
        <div class="icon"></div>
        <div class="desc">商品介绍</div>
      </div>
    </div>
    <Editor :readOnly="readonly" v-model="form.text" :style="{ color: 'var(--active_font_color)' }" />
  </div>
</template>
<script>

import {getToken} from "@/utils/auth";
import {culturalAndCreativeDetail, merchandiseAdd, merchandiseEdit} from "@/api/form/cultrue";

export default {
  mounted() {
    this.shopId = this.$route.query.shopId
    this.merId = this.$route.query.id
    this.type = this.$route.query.type
    if (this.merId) {
      this.getMerDetail()
    }
  },
  data() {
    return {
      uploadFileUrl: window.serverAPI.url + "/common/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      shopId: '',
      merId: '',
      type: '',
      form: {
        name: '',
        price: '',
        status: '',
        imageUrl: '',
        text: ''
      },
    }
  },
  computed: {
    readonly() {
      return this.type === 'look'
    }
  },
  methods: {
    async getMerDetail() {
      const { code, data, msg } = await culturalAndCreativeDetail({
        id: this.merId
      })
      if (code !== 200) {
        this.$message({ message: msg, type: 'error' })
        return
      }
      this.form.name = data.merchandiseName
      this.form.price = data.merchandisePrice
      this.form.imageUrl = data.merchandiseHeadImg
      this.form.text = data.merchandiseIntroduce
      this.form.status = data.onSaleStatus
    },
    async merchantAdd() {
      const keys = Object.keys(this.form)
      const valid = keys.every(key => this.form[key])
      if(!valid) {
        this.$message({message: '请录入完整', type: 'warning'})
        return;
      }
      const param = {
        qiyeId: this.shopId,
        merchandiseHeadImg: this.form.imageUrl,
        merchandiseIntroduce: this.form.text,
        merchandiseOtherImg: this.form.imageUrl,
        merchandiseName: this.form.name,
        merchandisePrice: this.form.price,
        onSaleStatus: this.form.status
      }
      let fn = ''
      if (this.type === 'edit') {
        fn = merchandiseEdit
        param.id = this.merId
      } else {
        fn = merchandiseAdd
      }

      const { code, msg } = await fn(param)
      if (code !== 200) {
        this.$message({message: msg, type: 'error'})
        return
      }
      const message = this.type === 'edit' ? '已修改' : '已添加'
      this.$message({message, type: 'success'})
      this.$router.back()
    },
    handleImgSuccess(res) {
      this.form.imageUrl = res.data.url;
    }
  }
}
</script>
<style lang="scss" scoped>
.container {
  background: var(--theme_bg_color);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    span {
      font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
      font-weight: 400;
      font-size: 16px;
      color: #333333;
      line-height: 19px;
      text-align: left;
      font-style: normal;
      text-transform: none;
    }
  }
  .detail {
    width: 100%;
    background: #FFFFFF;
    margin: 16px 0;
    padding: 16px;
    box-sizing: border-box;
    .title {
      display: flex;
      align-items: center;
      margin-bottom: 25px;
      .icon {
        width: 4px;
        height: 16px;
        background: #3370FF;
        margin-right: 10px;
      }
      .desc {
        font-size: 16px;
        font-weight: 400;
        color: #333333;
      }
    }
  }
  .btn-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    .query {
      width: 72px;
      height: 32px;
      background: #3370FF;
      border: none;
      color: #ffffff;
    }

    .clear {
      width: 72px;
      height: 32px;
    }
  }
  .mer-uploader {
    width: 88px;
    height: 88px;
    background: #F7F8FA;
    border-radius: 6px 6px 6px 6px;
    border: 1px solid #D0D3D6;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .mer-img {
    width: 100%;
  }
}
</style>
